<template>
  <div class="wrap">
    <scroll-view :scroll-y="true" :show-scrollbar="true" class="scroll_class">
      <div class="total_price">￥{{ separate(workingType === 0 ? studioInfo.money : detailInfo.settlementMoney) }}</div>
      <div class="ticket_info">
        <div class="center_info">
          <div class="invoicer">
            <div class="title">购买方</div>
            <div class="content_bold">{{ workingType === 0 ?studioInfo.companyName : detailInfo.enterpriseName }}</div>
          </div>
          <div v-if="workingType === 1" class="social_credit_code">
            <div class="title">统一社会信用代码</div>
            <div class="content1">{{ detailInfo.enterpriseCreditCode }}</div>
          </div>
          <div class="receiver">
            <div class="title">销售方</div>
            <div class="content_bold">{{ workingType === 0 ?studioInfo.studioName : detailInfo.studioName }}</div>
          </div>
          <div class="invoice_status">
            <div class="title">开票状态</div>
            <div v-if="workingType === 0" :class="{ content0: studioInfo.billStatus === 3, content1: studioInfo.billStatus === 1, content2: studioInfo.billStatus === 2 }">
              {{ studioInfo.billStatus === 1 ? '未开票' : studioInfo.billStatus === 2 ? '已开票' : studioInfo.billStatus === 3 ? '部分开票' : '--' }}
            </div>
            <div v-if="workingType === 1" :class="{ content0: detailInfo.billStatus === 3, content1: detailInfo.billStatus === 1, content2: detailInfo.billStatus === 2 }">
              {{ detailInfo.billStatus === 1 ? '未开票' : detailInfo.billStatus === 2 ? '已开票' : detailInfo.billStatus === 3 ? '部分开票' : '--' }}
            </div>
          </div>
          <div class="ticket_type">
            <div class="title">开票类型</div>
            <div v-if="workingType === 0" class="content1">{{ studioInfo.billType === 1 ? '增值税普通发票' : studioInfo.billType === 2 ? '增值税专用发票' : '--' }}</div>
            <div v-if="workingType === 1" class="content1">{{ detailInfo.billType === 1 ? '增值税普通发票' : detailInfo.billType === 2 ? '增值税专用发票' : '--' }}</div>
          </div>
          <div class="time">
            <div class="title">订单时间</div>
            <div class="content1">{{ workingType === 0 ? studioInfo.settleTime : detailInfo.uploadTime }}</div>
          </div>
        </div>
        <div v-if="workingType === 1" class="copy_text" @tap.stop="copyText">一键复制开票信息</div>
      </div>
      <div v-if="serviceList.length > 0 && workingType === 1" class="service_detail">
        <div class="center_detail">
          <div class="title">发票明细</div>
          <div class="service_list">
            <div class="head">
              <div class="service_type">服务内容</div>
              <div class="subject">开票科目</div>
              <div class="amount">开票金额</div>
              <div class="short_fall">发票差额</div>
            </div>
            <div v-for="(i, index) in serviceList" :key="index" class="body">
              <div :class="[ index === (serviceList.length -1) ? 'inner_detail' : 'inner_detail2' ]">
                <div class="service_type">{{ i.serviceProjectType || '--' }}</div>
                <div class="subject">{{ i.billSubject || '--' }}</div>
                <div class="amount">{{ separate(i.money) }}</div>
                <div class="short_fall">{{ separate(i.difference) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="workingType === 0" class="service_detail">
        <div class="center_detail">
          <div class="title">发票明细</div>
          <div class="service_list">
            <div class="head">
              <div class="service_type2">服务内容</div>
              <div class="subject2">开票科目</div>
              <div class="amount2">开票金额</div>
            </div>
            <div v-for="(i, index) in studioServiceInfo" :key="index" class="body">
              <div v-show="i.money" :class="[ index === (studioServiceInfo.length - 1) ? 'inner_detail' : 'inner_detail2' ]">
                <div class="service_type2">{{ i.serviceType }}</div>
                <div class="subject2">{{ i.billDetail }}</div>
                <div class="amount2">{{ separate(i.money) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="workingType === 1" class="service_confirm">
        <div class="center_confirm">
          <div class="title">服务确认单</div>
          <div class="sign_name">
            <div class="sign_title">服务确认单</div>
            <div v-if="detailInfo.confirmSignViewPath" class="been_sign_name" @click="Router.push('gl_ticket_sign', { path: detailInfo.confirmSignViewPath })">查看详情&nbsp;&nbsp;></div>
            <div v-else class="no_sign_name" @click="goSign">去签署&nbsp;&nbsp;></div>
          </div>
        </div>
      </div>
      <div class="ticket_detail">
        <div class="center_detail">
          <div class="title">发票明细</div>
          <div v-if="(workingType === 0 && billStaticList.length > 0) || (workingType === 1 && detailInfo.billStatus !== 2 && fileList.length > 0) || (workingType === 1 && billStaticList.length > 0)" class="ticket_upload">
            <div class="ticket_name">发票详情</div>
            <div class="ticket_list">
              <div v-if="workingType === 0" class="ticket_file2">
                <div v-for="(i, index) in billStaticList" :key="index" class="file_item">
                  <div v-if="fileTypeFn(i) === '1'" :style="{background: `url('https://img2.shoudaozi.com${i}')`, backgroundSize: 'cover'}" class="pic2" />
                  <div v-else class="pic">
                    <Icon name="icon-pdf-2" size="48" />
                  </div>
                  <div class="name" @click="previewImage(i)">{{ i }}</div>
                </div>
              </div>
              <div v-if="workingType === 1 && billStaticList.length > 0" class="ticket_file2">
                <div v-for="(i, index) in billStaticList" :key="index" class="file_item">
                  <div class="pic">
                    <Icon name="icon-pdf-2" size="48" />
                  </div>
                  <div :class="{ 'lock_name': i.isLock, 'name': !i.isLock }" @click="previewImage(i.path)">{{ i.fileName }}</div>
                  <div v-if="i.isLock" class="pic">
                    <Icon name="icon-suoding" size="36" />
                  </div>
                  <!-- <div v-if="!i.isLock && i.isUsed" class="lock_pic">
                    <Icon name="icon-jiesuo" size="36" />
                  </div> -->
                  <div v-if="!i.isUsed" class="lock_pic" @click="deleteBill(i.id)">
                    <Icon name="icon-delete" size="36" />
                  </div>
                  <!-- <div v-if="!i.isUsed" class="delete" @click="deleteBill(i.id)" /> -->
                </div>
              </div>
              <div v-if="workingType === 1 && detailInfo.billStatus !== 2 && fileList.length > 0" class="ticket_file">
                <div v-for="(i, index) in fileList" :key="index" class="file_item">
                  <div class="pic">
                    <Icon name="icon-pdf-2" size="48" />
                  </div>
                  <div class="name" @click="previewImage(i.path)">{{ i.name }}</div>
                  <div class="pic" @click="deleteFile(i.name, i.time, i.timestamp)">
                    <Icon name="icon-delete" size="36" />
                  </div>
                  <!-- <div class="delete" @click="deleteFile(i.name, i.time, i.timestamp)" /> -->
                </div>
              </div>
            </div>
          </div>
          <div v-else class="no_ticket">
            <div class="inner_no" />
            暂无发票
          </div>
          <div v-if="workingType === 1 && detailInfo.billStatus !== 2" class="footer">
            <div class="upload" @click="invoiceUploadFn">发票上传</div>
            <div class="submit" @click="submitTicket">提交</div>
          </div>
        </div>
      </div>
    </scroll-view>
    <Popup ref="ticketRef">
      <Pconfirm tip-text="确定删除该发票吗？" tip-title="删除发票提示" @cancel="ticketRef.change()" @confirm="deleteConfirm" />
    </Popup>
    <Popup ref="confirmSignRef">
      <Pconfirm tip-text="您需要签署服务确认单后才可进行下一步，确认签署吗？" tip-title="服务确认单未签署" @cancel="confirmSignRef.change()" @confirm="signConfirm" />
    </Popup>
    <!--  上传发票时校验是否有活动小结或业务统计表中的顾客是否有跟进记录  -->
    <up-popup :close-on-click-overlay="false" :show="showUploadCheck" bg-color="transparent" mode="center" overlay-opacity="0.25">
      <Pconfirm :tip-text="checkTip" cancel-text="关闭" confirm-text="去添加" @cancel="showUploadCheck = false" @confirm="goAddFn" />
    </up-popup>
    <!--  上传发票时发票科目关键字校验提示  -->
    <up-popup :close-on-click-overlay="false" :show="showInvoiceSubjectCheckTip" bg-color="transparent" mode="center" overlay-opacity="0.25">
      <Pconfirm :is-two-btn="false" :tip-text="checkTipText" confirm-text="我知道了" tip-title="提示" @confirm="showInvoiceSubjectCheckTip = false" />
    </up-popup>
    <!-- 上传发票时发票科目关键字校验 -->
    <!--    <up-popup :close-on-click-overlay="false" :show="showInvoiceUpload" mode="bottom" overlay-opacity="0.25" round="12">-->
    <!--      <div class="popup_box">-->
    <!--        <div class="popup_title">发票上传</div>-->
    <!--        <div class="service_list">-->
    <!--          <div class="head">-->
    <!--            <div class="service_type">服务内容</div>-->
    <!--            <div class="subject">开具科目</div>-->
    <!--            <div class="amount">待开票金额</div>-->
    <!--            <div class="short_fall">发票</div>-->
    <!--          </div>-->
    <!--          <div v-for="(i, index) in serviceList" :key="index" class="body">-->
    <!--            <div v-if="i.money !== 0" :class="[ index === (serviceList.length -1) ? 'inner_detail' : 'inner_detail2' ]">-->
    <!--              <div class="service_type">{{ i.serviceProjectType || '&#45;&#45;' }}</div>-->
    <!--              <div class="subject">{{ i.billSubject || '&#45;&#45;' }}</div>-->
    <!--              <div class="amount">{{ separate(i.money) }}</div>-->
    <!--              <div class="short_fall">-->
    <!--                <Button size="S" type="solid" width="110" @confirm="chooseInvoiceFn(i.billSubject)">上传</Button>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="flex_sa_cen mt26">-->
    <!--          <Button size="N" type="solid" @confirm="cancelUploadFn">取消</Button>-->
    <!--          <Button size="N" @confirm="confirmUploadFn">确认上传</Button>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </up-popup>-->
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { Router, postFileReq, debouncePro, LStorage, onLoad, onUnload, storeCommit } from '@U/common'
import { Msg, MsgLoading, MsgLoadingClear, PMsgLoadingClean } from '@C/Msg'
import Popup from '@C/Popup.vue'
import Icon from '@C/Icon.vue'
import Pconfirm from '@C/Pconfirm.vue'
import { getEnterpriseDetail, getEnterpriseServiceDetail, verifyTicket, uploadTicket } from '@P/Ticket/request'
import { getChannelAgentInfo } from '@P/User/request'
import Button from '@C/Button.vue'
import { thisMonthCustomerNoFollowup, thisMonthIsCreateSchedule } from '@P_GL/ZhiKe/request'

const workingType: any = ref(1)
const params: any = reactive({
  groupId: '',
})
const studioInfo: any = ref({})
const studioServiceInfo: any = ref([])
const detailInfo: any = ref({})
const billStaticList: any = ref([])
const serviceList: any = ref([])
const fileList: any = ref([])
const ticketRef: any = ref(null)
const confirmSignRef: any = ref(null)
const currentFileName: any = ref('')
const separate = (number: any) => number?.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
const enterpriseText: any = ref('')

const copyText = () => {
  enterpriseText.value = `开票抬头${' '.repeat(8)}\t\t${detailInfo.value.enterpriseName}\n统一社会信用代码${' '.repeat(3)}\t${detailInfo.value.enterpriseCreditCode}\n发票类型\t\t\t${detailInfo.value.billType === 1 ? '普票' : detailInfo.value.billType === 2 ? '专票' : '--'}\n`
  serviceList.value.forEach((item: any, index: any) => {
    const listText = `${serviceList.value.length > 1 ? index + 1 : ''}${' '.repeat(serviceList.value.length > 1 ? 6 : 8)}\t\t`
    enterpriseText.value += `开票科目${listText}`
    enterpriseText.value += `${item.billSubject}\n`
    enterpriseText.value += `开票金额${listText}`
    enterpriseText.value += `${separate(item.money)}\n`
  })

  uni.setClipboardData({
    data: enterpriseText.value,
    showToast: false,
    success(res) {
      uni.showToast({ icon: 'none', title: '复制成功' })
    },
    fail(err) {
      console.log('err', err)
    },
  })
}

const previewImage = (path: string) => {
  fileTypeFn(path) === '1'
  ? uni.previewImage({
      urls: [`${import.meta.env.VITE_SHOUDAO_IMG_URL}/${path}`],
      success: (res) => {
        console.log('res', res)
      },
      fail: (err) => {
        console.log('err', err)
      },
    })
  : fileTypeFn(path) === '2'
    ? uni.downloadFile({
        url: `${import.meta.env.VITE_SHOUDAO_IMG_URL}/${path}`,
        success: (res) => {
          uni.openDocument({
            filePath: res.tempFilePath,
            fileType: res.tempFilePath.split('.').pop(),
            success: (info) => {
              console.log('info', info)
            },
            fail: (infoErr) => {
              console.log('infoErr', infoErr)
            },
          })
        },
        fail: (err) => {
          console.log('err2', err)
        },
      })
    : ''
}

const goSign = () => {
  LStorage('currentEnterpriseId', params.groupId)
  Router.push('gl_ticket_sign', { bizGroupId: params.groupId })
}

const fileTypeFn = (i: string) => {
  const str = i.split('.').pop() as any

  // 收稻管理后台那边上传的发票 仅支持：png、jpg、pdf格式，但为了以防万一，尽量把常用类型都加上
  const imageArr = ['png', 'jpg', 'jpeg', 'svg', 'gif']
  const fileArr = ['pdf', 'xls', 'xlsx', 'doc', 'docx', 'ppt', 'pptx']
  if (imageArr.includes(str)) return '1' // 图片
  if (fileArr.includes(str)) return '2' // 文件
}

const currentName: any = ref('')
const currentTime: any = ref('')
const currentTimestamp: any = ref('')
const currentId: any = ref('')
const currentDelList: any = ref('')

const deleteBill = (id: any) => {
  currentDelList.value = 'billStaticList'
  currentId.value = id
  ticketRef.value.change()
}

const deleteFile = (name: string, time: any, timestamp: any) => {
  currentDelList.value = 'fileList'
  currentName.value = name
  currentTime.value = time
  currentTimestamp.value = timestamp
  ticketRef.value.change()
}
const showUploadCheck = ref(false)
const checkTip = ref('')
let zhiKeLevel = ''
// const showInvoiceUpload = ref(false)
const showInvoiceSubjectCheckTip = ref(false)
const checkTipText = ref('')
const invoiceUploadFn = async () => {
  // 判断是否需要签署外部企业合同
  if (!detailInfo.value.confirmSignViewPath) {
    confirmSignRef.value.change()
    return
  }
  // 上传发票时校验是否有活动小结或业务统计表中的顾客是否有跟进记录
  const res1 = await getChannelAgentInfo().finally(() => {})
  if (res1?.code === 200) {
    const typeArr = res1.data?.typeAndSuperior
    // 数组为空时当做服务商处理  0 合作商；1 服务商
    if (typeArr.length === 0) {
      zhiKeLevel = 'serviceProvider'
      storeCommit('zhiKeGrade', 'serviceProvider')
    } else if (typeArr.length === 2) zhiKeLevel = 'serviceAndCooperateProvider'
    else {
      typeArr.forEach((item: object) => {
        if (item.category === 0) zhiKeLevel = 'cooperateProvider'
        if (item.category === 1) {
          zhiKeLevel = 'serviceProvider'
          storeCommit('zhiKeGrade', 'serviceProvider')
        }
      })
    }
    if (zhiKeLevel === 'cooperateProvider') {
      await thisMonthIsCreateFollowupFn()
      if (followUpInfo.exist) {
        checkTip.value = `当前订单中有${followUpInfo.count}位顾客本月未添加跟进记录，请添加后再上传发票！`
        showUploadCheck.value = true
        return
      }
    }
    // if (zhiKeLevel === 'serviceProvider' && !await thisMonthIsCreateScheduleFn()) {
    //   checkTip.value = '您本月未添加活动日程小结，请添加后再上传发票！'
    //   showUploadCheck.value = true
    //   return
    // }
    // if (zhiKeLevel === 'serviceAndCooperateProvider' && (!await thisMonthIsCreateFollowupFn() && !await thisMonthIsCreateScheduleFn())) {
    //   checkTip.value = '当前订单中有3位顾客本月未添加跟进记录；您本月未添加活动小结，请添加后再上传发票！'
    //   showUploadCheck.value = true
    //   return
    // }
    wx.chooseMessageFile({
      count: 1,
      success: async (res: any) => {
        const uploadPath = res.tempFiles[0].path
        if (uploadPath.split('.').pop() !== 'pdf') {
          await uni.showToast({ title: '仅支持上传pdf格式', icon: 'none', duration: 2500 })
          return
        }
        await MsgLoading('上传中')
        currentFileName.value = res.tempFiles[0].name || '--'
        const fileInfo = await postFileReq('/api/file/upload', res.tempFiles[0].path)
        const jsonPath = JSON.parse(fileInfo.data).data[0]
        const res4 = await verifyTicket({ path: jsonPath, fileName: res.tempFiles[0].name, bizGroupId: params.groupId }).finally(() => {})
        if (res4?.code === 200 && res4?.data) {
          PMsgLoadingClean({ msg: '上传成功' })
          const obj = {
            path: JSON.parse(fileInfo.data).data[0] || '',
            name: res.tempFiles[0].name,
            time: res.tempFiles[0].time,
            money: res4.data.totalAmount || '',
            invoiceType: res4.data.invoiceType,
            timestamp: new Date().getTime(),
            id: res4.data.id,
          }
          fileList.value.push(obj)
        }
        if (res4?.code === 212) {
          PMsgLoadingClean()
          showInvoiceSubjectCheckTip.value = true
          checkTipText.value = res4.msg
        }
      },
      fail: (err: any) => {
        console.log('err', err)
      },
    })
  }
}
// 获取结算单内每个顾客，本月是否至少有一条跟进记录
// const thisMonthIsCreateScheduleFn = async () => {
//   const res3 = await thisMonthIsCreateSchedule().finally(() => {})
//   if (res3?.code === 200) return res3.data
// }
// 判断本月是否至少有一条活动日程记录
let followUpInfo = {}
const thisMonthIsCreateFollowupFn = async () => {
  const res2 = await thisMonthCustomerNoFollowup({ bizGroupId: detailInfo.value.id, bizFileId: detailInfo.value.bizFileId }).finally(() => {})
  if (res2?.code === 200) followUpInfo = res2.data
}
const goAddFn = () => {
  if (zhiKeLevel === 'cooperateProvider' || zhiKeLevel === 'serviceAndCooperateProvider') Router.push('myCustomer', { key: 'gl_hhr_taxationForm' })
  if (zhiKeLevel === 'serviceProvider') Router.push('activityScheduleList')
  showUploadCheck.value = false
}
// const chooseInvoiceFn = (invoiceSubject: string) => {
//   wx.chooseMessageFile({
//     count: 1,
//     success: async (res: any) => {
//       const uploadPath = res.tempFiles[0].path
//       if (uploadPath.split('.').pop() !== 'pdf') {
//         await uni.showToast({ title: '仅支持上传pdf格式', icon: 'none', duration: 2500 })
//         return
//       }
//       await MsgLoading('上传中')
//       currentFileName.value = res.tempFiles[0].name || '--'
//       const fileInfo = await postFileReq('/api/file/upload', res.tempFiles[0].path)
//       const jsonPath = JSON.parse(fileInfo.data).data[0]
//       const { code, data } = await verifyTicket({ path: jsonPath, fileName: res.tempFiles[0].name, bizGroupId: params.groupId }).finally(() => {})
//       if (code === 200 && data) {
//         PMsgLoadingClean({ msg: '上传成功' })
//         const obj = {
//           path: JSON.parse(fileInfo.data).data[0] || '',
//           name: res.tempFiles[0].name,
//           time: res.tempFiles[0].time,
//           money: data.totalAmount || '',
//           invoiceType: data.invoiceType,
//           timestamp: new Date().getTime(),
//           id: data.id,
//         }
//         fileList.value.push(obj)
//       }
//     },
//     fail: (err: any) => {
//       console.log('err', err)
//     },
//   })
// }
// const cancelUploadFn = () => {
//   showInvoiceUpload.value = false
// }
// const confirmUploadFn = () => {
//   if (invoiceList.length < 1) return Msg({ msg: '请先上传发票！' })
//   fileList.value = invoiceList
//   cancelUploadFn()
// }
const isAllLock: any = ref(true)

async function getDetailData() {
  const res = await getEnterpriseDetail(params).finally(() => {})
  if (res.code === 200 && res.data) {
    detailInfo.value = res.data.groupInfo
    billStaticList.value = res.data.billInfo
    billStaticList.value.forEach((item: any) => {
      if (!item.isLock) {
        isAllLock.value = false
      }
    })
  }
}

async function getServiceData() {
  const serviceRes = await getEnterpriseServiceDetail(params).finally(() => {})
  if (serviceRes.code === 200 && serviceRes.data) serviceList.value = serviceRes.data
}

const deleteConfirm = () => {
  if (currentDelList.value === 'fileList') fileList.value = fileList.value.filter((item: any) => item.timestamp !== currentTimestamp.value)
  else if (currentDelList.value === 'billStaticList') billStaticList.value = billStaticList.value.filter((item: any) => item.id !== currentId.value)
  ticketRef.value.change()
}

const signConfirm = () => {
  confirmSignRef.value.change()
  Router.push('gl_ticket_sign', { bizGroupId: params.groupId })
}

const submitTicket = debouncePro(() => innerFn(), 250)

const innerFn = async () => {
  // 判断是否需要签署外部企业合同
  if (!detailInfo.value.confirmSignViewPath) {
    confirmSignRef.value.change()
    return
  }
  const fileIdList = fileList.value.map((item: any) => item.id)
  const billStaticIdList = billStaticList.value.map((item: any) => item.id)
  const newFileList = fileIdList.concat(billStaticIdList)
  if (newFileList.length > 10) {
    await uni.showToast({ title: '单次最多提交10张发票', icon: 'none' })
    return
  }
  const ticketParams: any = {
    BizGroupId: params.groupId,
  }
  newFileList.forEach((item: string | number, index: number) => {
    if (index < 10 && item) {
      ticketParams[`BizInvoiceId[${index}]`] = item
    }
  })
  await MsgLoading('提交中')
  const res = await uploadTicket(ticketParams).finally(() => {})
  if (res?.code === 200) {
    MsgLoadingClear({ msg: '提交成功' })
    await getDetailData()
    fileList.value = []
  }
}

async function getAllData(info: any) {
  // 工作室不需要调用详情接口，直接接收 从票务列表 传来的数据即可
  workingType.value = parseInt(Router.route().params?.type)
  if (workingType.value === 0) {
    studioInfo.value = info
    billStaticList.value = studioInfo.value.billPic.length > 0 ? studioInfo.value.billPic.split(',') : []
    studioServiceInfo.value = info.serviceContent

    // studioServiceInfo.value = [
    //   {
    //     serviceProjectType: '市场推广服务',
    //     serviceProject: studioInfo.value.marketingExpansionBillDetail || '--',
    //     money: studioInfo.value.marketingExpansionMoney,
    //   },
    //   {
    //     serviceProjectType: '营销服务',
    //     serviceProject: studioInfo.value.marketingServiceBillDetail || '--',
    //     money: studioInfo.value.marketingServiceMoney,
    //   },
    //   {
    //     serviceProjectType: '客户服务',
    //     serviceProject: studioInfo.value.customerServiceBillDetail || '--',
    //     money: studioInfo.value.customerServiceMoney,
    //   },
    // ]
  } else if (workingType.value === 1) {
    params.groupId = info.id || LStorage('currentEnterpriseId')
    await getDetailData()
    await getServiceData()
  }
}
onLoad(() => {
  getAllData(Router.route().params?.info || {})
  uni.$on('getDetailData', getDetailData) // 注册全局事件 getDetailData
})
// 页面销毁时清除全局事件，否则每次进入页面都会注册一模一样的全局事件，导致在其他页面触发时触发很多次一样的全局事件
onUnload(() => {
  uni.$off('getDetailData')
})
</script>
<style lang="less" scoped>
@font-face {
  src: url('@/style/babels.TTF');
  font-family: 'myFont';
}
.wrap {
  width: 100%;
  height: 100%;
  background-color: #F2F2F7;
  .scroll_class {
    width: 100%;
    height: 100%;
    .total_price {
      width: 100%;
      height: 108rpx;
      line-height: 108rpx;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 24px;
      color: #262626;
      border-top: 1rpx solid rgba(0, 0, 0, .1);
      background-color: #fff;
    }
    .ticket_info {
      width: 100%;
      background-color: #fff;
      .center_info {
        width: 88%;
        margin: 0 auto;
        border-top: 1rpx solid rgba(0, 0, 0, .1);
        border-bottom: 1rpx solid rgba(0, 0, 0, .1);
        padding: 16rpx 0;
        .invoicer, .social_credit_code, .receiver, .invoice_status, .ticket_type, .multiple, .time {
          width: 100%;
          min-height: 74rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: rgba(0,0,0,0.45);
          display: flex;
          .title {
            width: 200rpx;
            min-height: 40rpx;
            padding-top: 12rpx;
            margin-right: 12px;
          }
          .content0, .content1, .content2 {
            width: 66%;
            min-height: 40rpx;
            line-height: 40rpx;
            font-family: PingFangSC, PingFang SC;
            padding-top: 12rpx;
            font-weight: 400;
            font-size: 14px;
            color: rgba(0,0,0,0.85);
          }
          .content_bold {
            min-height: 40rpx;
            line-height: 64rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: rgba(0,0,0,0.85);
          }
          .content0 {
            color: #1890ff;
          }
          .content1 {
            color: rgba(0,0,0,0.85);
          }
          .content2 {
            color: #2DC76D;
          }
        }
      }
      .copy_text {
        width: 88%;
        margin: 0 auto;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #1890FF;
        font-size: 14px;
      }
    }
    .service_detail {
      width: 100%;
      margin-top: 24rpx;
      background-color: #fff;
      padding-bottom: 24rpx;
      .center_detail {
        width: 88%;
        margin: 0 auto;
        .title {
          width: 100%;
          height: 96rpx;
          line-height: 96rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: rgba(0,0,0,0.85);
        }
        .service_list {
          width: 100%;
          .head {
            width: 100%;
            height: 66rpx;
            background-color: #F4F4F4;
            display: flex;
            .service_type, .subject, .amount, .short_fall, .service_type2, .subject2, .amount2 {
              height: 100%;
              line-height: 66rpx;
              text-align: center;
              box-sizing: border-box;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 12px;
              color: rgba(0,0,0,0.65);
              word-wrap: break-word;
              white-space: normal;
              word-break: break-all;
            }
            .subject {
              width: 40%;
            }
            .service_type2, .amount2 {
              width: 25%;
            }
            .service_type, .short_fall {
              width: 20%;
            }
            .subject2 {
              width: 50%;
            }
            .subject, .subject2 {
              border-left: 1px solid rgba(0, 0, 0, .1);
              border-right: 1px solid rgba(0, 0, 0, .1);
              box-sizing: border-box;
            }
            .amount {
              width: 20%;
              border-right: 1px solid rgba(0, 0, 0, .1);
            }
            .amount, .amount2 {
              word-wrap: break-word;
              white-space: normal;
              word-break: break-all;
            }
          }
          .body {
            width: 100%;
            min-height: 92rpx;
            text-align: center;
            background-color: #F9F9FB;
            .inner_detail, .inner_detail2 {
              width: 100%;
              min-height: 92rpx;
              display: flex;
              .service_type, .subject, .amount, .short_fall, .service_type2, .subject2, .amount2 {
                min-height: 92rpx;
                padding: 16rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 12px;
                color: rgba(0,0,0,0.65);
                display: flex;
                align-items: center;
                justify-content: space-around;
              }
              .subject {
                width: 40%;
              }
              .service_type2, .amount2 {
                width: 25%;
              }
              .service_type, .short_fall {
                width: 20%;
              }
              .subject2 {
                width: 50%;
              }
              .subject, .subject2 {
                border-left: 1px solid rgba(0, 0, 0, .1);
                border-right: 1px solid rgba(0, 0, 0, .1);
                box-sizing: border-box;
              }
              .amount {
                width: 20%;
                border-right: 1px solid rgba(0, 0, 0, .1);
              }
              .amount, .amount2, .short_fall {
                word-wrap: break-word;
                white-space: normal;
                word-break: break-all;
              }
            }
            .inner_detail {
              border: none;
            }
            .inner_detail2 {
              border-bottom: 1px solid rgba(0, 0, 0, .1);
            }
          }
        }
      }
    }
    .ticket_detail {
      width: 100%;
      min-height: 140px;
      margin-top: 24rpx;
      background-color: #fff;
      padding-bottom: 24rpx;
      .center_detail {
        width: 88%;
        margin: 0 auto;
        .title {
          width: 100%;
          height: 96rpx;
          line-height: 96rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: rgba(0,0,0,0.85);
        }
        .ticket_type {
          width: 100%;
          display: flex;
          .ticket_name {
            min-width: 80rpx;
            min-height: 80rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: rgba(0,0,0,0.45);
            display: flex;
            align-items: center;
            margin-right: 28rpx;
          }
          .ticket_content {
            width: 70%;
            min-height: 80rpx;
            display: flex;
            align-items: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: rgba(0,0,0,0.85);
          }
        }
        .ticket_upload {
          width: 100%;
          display: flex;
          .ticket_name {
            width: 25%;
            min-height: 80rpx;
            padding-top: 12rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: rgba(0,0,0,0.45);
            display: flex;
          }
          .ticket_list {
            width: 75%;
            .ticket_file, .ticket_file2 {
              width: 100%;
              min-height: 80rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: rgba(0,0,0,0.85);
              .file_item {
                width: 100%;
                min-height: 60rpx;
                display: flex;
                align-items: center;
                padding: 0 8rpx;
                margin-bottom: 16rpx;
                border: 1px solid rgba(0, 0, 0, .1);
                border-radius: 7px;
                .name {
                  white-space: nowrap;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 14px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  margin-right: 16rpx;
                }
              }
            }
            .ticket_file {
              .file_item {
                background: #F9FAFB;
                border-radius: 8rpx;
                border: 2rpx solid #DFDFE1;
                .pic {
                  width: 40rpx;
                  height: 40rpx;
                  display: flex;
                  align-items: center;
                  margin-right: 16rpx;
                  border-radius: 8rpx;
                }
                .name {
                  width: 74%;
                  color: rgba(24,144,255,0.7);
                }
                .delete {
                  width: 40rpx;
                  height: 40rpx;
                  display: flex;
                  align-items: center;
                  line-height: 40rpx;
                  background: url('https://shoudaostatic.oss-cn-shanghai.aliyuncs.com/MEIDAO-ZHIKE/delete.svg');
                  background-size: cover;
                }
              }
            }
            .ticket_file2 {
              .file_item {
                background: #fff;
                .pic, .lock_pic {
                  width: 60rpx;
                  height: 60rpx;
                  display: flex;
                  align-items: center;
                  border-radius: 8rpx;
                  margin-right: 6px;
                }
                .lock_pic {

                }
                .pic2 {
                  width: 48rpx;
                  height: 48rpx;
                  display: flex;
                  align-items: center;
                  margin-right: 16rpx;
                  border-radius: 8rpx;
                }
                .name, .lock_name {
                  width: calc(100vw - 100px);
                }
                .name {
                  color: rgba(24,144,255,0.7);
                }
                .lock_name {
                  color: rgba(0,0,0,0.25);
                }
                .delete {
                  width: 68rpx;
                  height: 44rpx;
                  display: flex;
                  align-items: center;
                  line-height: 40rpx;
                  background: url('https://shoudaostatic.oss-cn-shanghai.aliyuncs.com/MEIDAO-ZHIKE/delete.svg');
                  background-size: cover;
                }
              }
            }
          }
        }
        .no_ticket {
          width: 100%;
          text-align: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: rgba(0,0,0,0.45);
          .inner_no {
            width: 104rpx;
            height: 104rpx;
            margin: 0 auto;
            margin-bottom: 8rpx;
            background: url('https://shoudaostatic.oss-cn-shanghai.aliyuncs.com/MEIDAO-ZHIKE/no_tickets.svg');
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
        .footer {
          width: 100%;
          height: 80rpx;
          margin-top: 32rpx;
          display: flex;
          justify-content: space-around;
          .upload, .submit {
            width: 42%;
            height: 80rpx;
            line-height: 80rpx;
            border-radius: 40rpx;
            text-align: center;
            box-sizing: border-box;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 36rpx;
          }
          .upload {
            background: #1890FF;
            color: #fff;
          }
          .submit {
            border: 2rpx solid #1890FF;
            color: #1890FF;
          }
        }
      }
    }
    .service_confirm {
      width: 100%;
      min-height: 88px;
      margin-top: 24rpx;
      background-color: #fff;
      padding-bottom: 24rpx;
      .center_confirm {
        width: 88%;
        margin: 0 auto;
        .title {
          width: 80px;
          height: 46px;
          line-height: 46px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: rgba(0,0,0,0.85);
        }
        .sign_name {
          width: 100%;
          height: 32px;
          display: flex;
          .sign_title, .been_sign_name, .no_sign_name {
            height: 100%;
            line-height: 32px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
          }
          .sign_title {
            width: 80px;
            color: rgba(0,0,0,.45);
          }
          .been_sign_name {
            width: calc(100vw - 80px);
            color: #1890FF;
            text-align: right;
          }
          .no_sign_name {
            width: calc(100vw - 80px);
            color: rgba(0,0,0, 0.25);
            text-align: right;
          }
        }
      }
    }
  }
  .popup_box {
    .popup_title {
      border-bottom: 0;
    }
    .service_list {
      width: 100%;
      .head {
        width: 100%;
        height: 66rpx;
        background-color: #F4F4F4;
        display: flex;
        .service_type, .subject, .amount, .short_fall, .service_type2, .subject2, .amount2 {
          height: 100%;
          line-height: 66rpx;
          text-align: center;
          box-sizing: border-box;
          font-weight: 500;
          font-size: 12px;
          color: rgba(0,0,0,0.65);
          word-wrap: break-word;
          white-space: normal;
          word-break: break-all;
        }
        .subject {
          width: 40%;
        }
        .service_type2, .amount2 {
          width: 25%;
        }
        .service_type, .short_fall {
          width: 20%;
        }
        .subject2 {
          width: 50%;
        }
        .subject, .subject2 {
          border-left: 1px solid rgba(0, 0, 0, .1);
          border-right: 1px solid rgba(0, 0, 0, .1);
          box-sizing: border-box;
        }
        .amount {
          width: 20%;
          border-right: 1px solid rgba(0, 0, 0, .1);
        }
        .amount, .amount2 {
          word-wrap: break-word;
          white-space: normal;
          word-break: break-all;
        }
      }
      .body {
        width: 100%;
        min-height: 92rpx;
        text-align: center;
        background-color: #F9F9FB;
        .inner_detail, .inner_detail2 {
          width: 100%;
          min-height: 92rpx;
          display: flex;
          .service_type, .subject, .amount, .short_fall, .service_type2, .subject2, .amount2 {
            min-height: 92rpx;
            padding: 16rpx;
            font-weight: 500;
            font-size: 12px;
            color: rgba(0,0,0,0.65);
            display: flex;
            align-items: center;
            justify-content: space-around;
          }
          .subject {
            width: 40%;
          }
          .service_type2, .amount2 {
            width: 25%;
          }
          .service_type, .short_fall {
            width: 20%;
          }
          .subject2 {
            width: 50%;
          }
          .subject, .subject2 {
            border-left: 1px solid rgba(0, 0, 0, .1);
            border-right: 1px solid rgba(0, 0, 0, .1);
            box-sizing: border-box;
          }
          .amount {
            width: 20%;
            border-right: 1px solid rgba(0, 0, 0, .1);
          }
          .amount, .amount2 {
            word-wrap: break-word;
            white-space: normal;
            word-break: break-all;
          }
        }
        .inner_detail {
          border: none;
        }
        .inner_detail2 {
          border-bottom: 1px solid rgba(0, 0, 0, .1);
        }
      }
    }
  }
}
</style>
